<template>
	<div id="order" class="container">
		<div class="search">
			<el-form ref="searchForm" size="small" :model="searchForm" inline label-width="90px">
				<el-form-item label="关键词：">
					<el-input v-model="searchForm.keyword" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search(searchForm)">查 询</el-button>
					<el-button @click="reset(searchForm)">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<h3 class="title"><span />内链管理</h3>
		<el-tabs id="tabcard" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
			<el-tab-pane label="本站内链" name="1" />
			<el-tab-pane label="公共内链" name="2" />
		</el-tabs>
		<div class="content">
			<el-button
				type="primary"
				class="add"
				size="small"
				icon="el-icon-plus"
				style="margin-bottom: 15px; margin-left: 15px"
				@click="goAdd"
				>添加</el-button
			>
			<!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete">批量删除</el-button> -->
			<BouncedDialog
				:title="addForm.id ? '编辑' : '添加'"
				:dialog-show.sync="dialogShow"
				width="50%"
				class="inner"
			>
				<el-form
					ref="addForm"
					:model="addForm"
					:rules="rules"
					inline
					class="addForm"
					label-width="80px"
				>
					<el-form-item label="关键词" prop="keyword">
						<el-input v-model="addForm.keyword" />
					</el-form-item>
					<el-form-item label="链接" prop="url">
						<el-input v-model="addForm.url" placeholder="以http://或者https:// 开头" />
					</el-form-item>
					<el-form-item label="权重" prop="weight">
						<el-input v-model="addForm.weight" placeholder="权重越高添加的优先级越高" />
					</el-form-item>
					<el-form-item label="是否启用">
						<el-select v-model="addForm.status">
							<el-option label="启用" :value="1" />
							<el-option label="关闭" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="跳转方式" prop="new_page_open">
						<el-select v-model="addForm.new_page_open">
							<el-option label="本页面打开" :value="1" />
							<el-option label="新页面打开" :value="2" />
						</el-select>
					</el-form-item>
					<div class="btn">
						<el-button @click="dialogShow = false">取 消</el-button>
						<el-button type="primary" @click="submit()">确 定</el-button>
					</div>
				</el-form>
			</BouncedDialog>
			<el-table
				:data="orderData"
				border
				stripe
				:header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }"
			>
				<!-- <el-table-column type="selection" width="55" /> -->
				<el-table-column label="ID" prop="id" width="80px" />
				<el-table-column label="关键词" prop="keyword" />
				<el-table-column label="链接地址" prop="url" />
				<el-table-column label="权重" prop="weight" width="100px" />
				<el-table-column label="链接数量" prop="count" width="100px" />
				<!-- <el-table-column label="跳转方式" prop="new_page_open" width="150px">
          <template slot-scope="scope">
            <span v-if="scope.row.new_page_open==1">本页面打开</span>
            <span v-if="scope.row.new_page_open==2">新页面打开</span>
          </template>
        </el-table-column> -->
				<el-table-column label="是否启用" prop="status" width="180px">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							:active-value="1"
							:inactive-value="2"
							active-text="正常"
							inactive-text="禁用"
							active-color="#f84311"
							inactive-color="rgba(0,0,0,0.2)"
							@change="disableUser(scope.row)"
						/>
					</template>
				</el-table-column>
				<!-- <el-table-column label="创建时间" prop="create_time" /> -->

				<el-table-column label="操作" width="150px" fixed="right">
					<template slot-scope="scope">
						<el-button class="edit" size="mini" @click="editor(scope.row)">编辑</el-button>
						<el-button class="dele" size="mini" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="page.currentPage"
				:page-sizes="page.pageSizes"
				:page-size="page.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
				:hide-on-single-page="page.total < page.size ? true : false"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>
<script>
import innerApi from '@/api/market/innerLink.js'
import websiteApi from '@/api/website.js'
export default {
	data() {
		return {
			activeName: '1',
			orderData: [], //
			dialogShow: false,
			options: [], // 站点下拉选项
			value: '', // 站点下拉框的值
			addForm: {},
			rules: {
				keyword: [{ required: 'true', message: '请输入关键词', trigger: 'blur' }],

				url: [{ required: 'true', message: '请输入链接地址', trigger: 'blur' }],
				new_page_open: [{ required: 'true', message: '请选择新页面的打开方式', trigger: 'change' }],
			},
			searchForm: {
				keyword: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
			val: {},
			id: '',
			siteId: '',
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.siteId = val
			this.getList()
			this.getWebsiteList()
		},
	},
	created() {
		// this.addForm.website_id = this.$store.getters.siteId
		this.siteId = this.$store.getters.siteId
		this.getList()
		this.getWebsiteList()
	},
	mounted() {
		// this.getTikets()
	},
	updated() {},
	methods: {
		handleClick(val, event) {
			this.activeName = val.name
			this.getList()
		},
		// 切换状态开关
		disableUser(row) {
			const val = {
				id: row.id,
				website_id: row.website_id,
				keyword: row.keyword,
				url: row.url,
				new_page_open: row.new_page_open,
				status: row.status,
				weight: row.weight,
				type: row.type,
			}

			innerApi.innerUpdate(val).then((res) => {
				if (res.code == 0) {
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 全选
		handleSelectionChange(val) {},
		// 批量删除
		Batchdelete() {},
		// 获取站点列表
		getWebsiteList() {
			websiteApi.websiteList().then((res) => {
				this.options = res.data
			})
		},
		// 选择站点
		chooseWedsite(val) {
			this.$forceUpdate()

			//   this.addForm.id = val
		},
		// 新增
		goAdd() {
			this.addForm = {
				id: '',
				website_id: this.activeName == '2' ? 0 : this.siteId,
				new_page_open: 2,
				status: 1,
				weight: 1,
				keyword: '',
				url: '',
				type: this.activeName,
			}
			console.log(this.activeName, this.addForm)
			this.dialogShow = true
		},
		// 编辑
		editor(row) {
			this.addForm = {
				id: row.id,
				website_id: row.website_id,
				new_page_open: row.new_page_open,
				status: row.status,
				weight: row.weight,
				keyword: row.keyword,
				url: row.url,
				type: row.type,
			}
			this.dialogShow = true
		},
		// 获取内链详情
		getInfo(val) {
			innerApi.innerInfo({ id: val }).then((res) => {
				this.addForm = res.data
				this.dialogShow = true
			})
		},
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (!this.addForm.id) {
						innerApi.innerSave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						innerApi.innerUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},

		// 查看模型字段列表
		// check(row) {
		//   this.$router.push({ name: 'modelField', query: { id: row.id }})
		// },
		// 删除
		del(row) {
			this.$confirm('此操作将永久删除该询盘信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					innerApi.innerDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success('已删除')
							this.getList()
						} else {
							this.$message.error('删除失败')
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		search(val) {
			this.getList()
		},
		reset() {
			this.searchForm.keyword = ''
		},
		// 列表
		getList() {
			this.val.website_id = this.siteId
			this.val.page = this.page.currentPage
			this.val.limit = this.page.size
			this.val.keyword = this.searchForm.keyword
			this.val.type = this.activeName
			innerApi.innerList(this.val).then((res) => {
				if (res.code == 0) {
					this.orderData = res.data
					this.page.total = res.total
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#order {
	.inner {
		.el-select {
			width: 100%;
		}
	}
	.addForm .el-form-item {
		width: 100%;
	}
	.addForm .el-form-item__content {
		width: calc(100% - 80px);
	}
}
</style>
<style scoped lang="scss">
.content {
	background-color: #fff;
}
.el-table {
	margin-bottom: 20px;
}
.search {
	min-width: 1350px;
	background-color: #fff;
	padding: 35px 30px 20px;
	border-radius: 5px;
	margin-bottom: 20px;
}
</style>
